<template>
    <div>
        <el-form>
            <el-row>
                <el-col>
                    <el-table :data="tableData" @selection-change="SelectionChange_event">
                        <el-table-column type="selection" width="40" align="center"></el-table-column>
                        <el-table-column prop="OutboundNumber" show-overflow-tooltip label="出库单号" align="center"></el-table-column>
                        <el-table-column prop="DeviceNumber" show-overflow-tooltip label="物资编号" align="center"></el-table-column>
                        <el-table-column prop="DeviceName" show-overflow-tooltip label="名称" align="center"></el-table-column>
                        <el-table-column prop="DeviceModel" show-overflow-tooltip label="规格型号" align="center"></el-table-column>
                        <el-table-column prop="Amount" show-overflow-tooltip label="出库数量" align="center"></el-table-column>
                        <el-table-column prop="WaitReturnAmount" show-overflow-tooltip label="待归还数量" align="center"></el-table-column>
                        <el-table-column prop="ReturnAmount" show-overflow-tooltip label="归还数量" align="center">
                             <template slot-scope="slot">
                                 <el-input v-model="slot.row.ReturnAmount"></el-input>
                             </template>
                        </el-table-column>
                        <el-table-column prop="DamageAmount" show-overflow-tooltip label="损坏数量" align="center">
                            <template slot-scope="slot">
                                <el-input v-model="slot.row.DamageAmount"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ConsumeAmount" show-overflow-tooltip label="消耗数量" align="center">
                            <template slot-scope="slot">
                                <el-input v-model="slot.row.ConsumeAmount"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Unit" show-overflow-tooltip label="单位" align="center"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22" :offset="1">
                    <el-form-item label-width="100px" label="备注" >
                        <el-input type="textarea" v-model="Remark" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col align="center">
                    <el-button type="success" @click="AddReturnOrder_event">确认</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "ReturnOutboundOrder",
        props: {
            tableData: {
                type: Array,
                required: true
            }
        },
        data() {
            return {
                Remark: '',
                selectData: [],
            }
        },
        methods: {
            //选择的数据
            SelectionChange_event(val) {
                this.selectData = val
            },
            //确认归还事件
            AddReturnOrder_event() {

                if (this.selectData.length == 0) {
                    this.$message.info('请选择归还物资')
                    return false
                }
                let result = true
                for (let i = 0; i < this.selectData.length; i++) {
                    let val = parseFloat(this.selectData[i].ReturnAmount ) + parseFloat(this.selectData[i].DamageAmount) + parseFloat(this.selectData[i].ConsumeAmount)
                    if (val > this.selectData[i].WaitReturnAmount) {
                        result = false
                        this.$message.warning('归还数量与消耗数量、损坏数量之和不能大于商品待归还数量')
                        return
                    }
                }
                if (result) {
                    let loadding = this.openLoading();
                    this.$http.post('Device/AddReturnOrder', {
                        Remark: this.Remark,
                        OutboundRecordList: this.selectData,
                    }).then(res => {
                        loadding.close();
                        if (res.data.IsSuccess) {
                            this.formresetFields_event()
                            this.$message.success('归还单生成成功!')
                            this.$parent.$parent.OutboundOrderReturn.dialog = false
                            this.$parent.$parent.formdata()
                        } else {
                            this.$message.warning(res.data.Msg)
                        }
                    })
                }
            },
            //重置表格
            formresetFields_event() {
                this.Remark = ''
            },
        },
    }
</script>

<style scoped>

</style>
